<template>
  <section>
    <search-box>
      <div class="flex-row-reverse">
        <el-button type="primary" @click="FnCreateConfig" :disabled="FnBtnDisabled('eks_2_createConfig')">新建配置</el-button>
        <el-button type="text" @click="FnGetConfigList">
          <i class="el-icon-refresh" style="font-size: 20px"></i>
        </el-button>
      </div>
    </search-box>
    <el-table :data="configList" border>
      <el-table-column prop="key" min-width="120" label="Key"></el-table-column>
      <el-table-column prop="value" min-width="240" label="Value"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button 
            type="text" 
            @click="FnUpdateConfig(scope.row)"
            :disabled="FnBtnDisabled('eks_2_updateConfig')">更新</el-button>
          <el-button
            type="text"
            @click="FnDelete(scope.row)"
            :disabled="FnBtnDisabled('eks_2_deleteConfig') || keyDeleteDisabled(scope.row.key)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="updateDialog"
      title="新建配置"
      width="700px"
      :before-close="handleClose">
      <el-form 
        :model="diaData"
        :rules="formRules"
        label-width="80px" 
        label-position="left"
        ref="diaRef">
        <el-form-item label="Key" prop="key">
          <el-input class="w-280" v-model="diaData.key" v-if="!isEdit"></el-input>
          <span v-else>{{ diaData.key }}</span>
          
        </el-form-item>
        <el-form-item label="Value" prop="value">
          <el-input 
            v-model="diaData.value"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10}">

          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button @click="FnAddConfig" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { authBtnDisabled } from '@/utils/auth.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import searchBox from '@/components/search-box.vue';
import configService from '@/service/eks/config.js'

const route = useRoute()
const configList = ref([{
  key: 'key',
  value:  "{\"NVIDIA 3060\":\"nvidia-rtx-a5000\"}"
}])

const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}

const updateDialog = ref(false)
const isEdit = ref(false)
const diaData = reactive({
  value: '',
  key: '',
  id: ''
})

const formRules = reactive({
  key: [{required: true, message: '请输入Key值', trigger: ['input', 'change', 'blur']}],
  value: [{required: true, message: '请输入Value值', trigger: ['input', 'change', 'blur']}]
})
const diaRef = ref(null)
const FnCreateConfig = () => {
  isEdit.value = false
  updateDialog.value = true
}
const FnUpdateConfig = (row) => {
  isEdit.value = true
  diaData.id = row.id
  diaData.value = row.value
  diaData.key = row.key
  updateDialog.value = true
}
const handleClose = () => {
  diaData.value = ''
  diaData.key = '',
  diaData.id = ''
  diaRef.value.resetFields()
  updateDialog.value = false 
}
const keyDeleteDisabled = (key) => {
  return ['cluster_os', 'region', 'az', 'gpu_id_mapping', 'cluster_os_pre'].indexOf(key) > -1
}
const FnDelete = (row) => {
  ElMessageBox.confirm(
    `您确定要删除${row.key}?`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    configService.deleteConfig({id: row.id}).then(res => {
      if(res.code === 'Success') {
        ElMessage.success('删除成功')
        FnGetConfigList()
      }
    })
  }).catch(() => {})
}
const FnAddConfig = () => {
  diaRef.value.validate(valid => {
    if(valid) {
      let params = {
        value: diaData.value
      }
      if(isEdit.value) {
        params.id = diaData.id
        configService.updateConfig(params).then(res => {
          if(res.code === 'Success') {
            ElMessage.success('更新成功')
            handleClose()
            FnGetConfigList()
          }
        })
      } else {
        params.key = diaData.key
        configService.addConfig(params).then(res => {
          if(res.code === 'Success') {
            ElMessage.success('新增配置成功')
            handleClose()
            FnGetConfigList()
          }
        })
      }
    }
  })
}
const FnGetConfigList = () => {
  configService.getConfigList().then(res => {
    if(res.code == 'Success') {
      configList.value = res.data ? res.data : []
    }
  })
}
FnGetConfigList()
</script>
<style scoped>

</style>